<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048</title>
</head>

<style>
    body {
        background: url('../imgs/1648559623565.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        height: 680px;
        font-family: "宋体";
        font-weight: bolder;
    }


    h2 {

        display: flex;
        justify-content: center;
        align-items: center;

    }

    div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    table {

        background: transparent;
        box-shadow: 5px 5px 2.5px #888888;
        border-radius: 10px;
        border-spacing: 8px;
        border: solid 1px;

    }

    td {

        box-shadow: 5px 5px 2.5px #888888;
        border-radius: 10px;
        text-align: center;
        border: solid 1px;
        width: 100px;
        height: 100px;
        font-size: 60px;




    }
</style>

<body>


    <div id="app">

        <h1>SHIXIN_2048概念版</h1>

        <table>

            <tr v-for="(i,i_index) in todo">

                <td v-for="(j,j_index) in i">


                    {{j.data}}


                </td>


            </tr>


        </table>


        <div id="font">

            <br>
            <br>
            <h2>得分:{{score}}</h2>
            <span>


                <br>
                抵制不良游戏，拒绝盗版游戏。<br>
                注意自我保护，谨防受骗上当。<br>
                适度游戏益脑，沉迷游戏伤身。<br>
                合理安排时间，享受健康生活。

            </span>
        </div>


    </div>


    </div>


    <script src="../Vue.js/vue.js"></script>

    <script>

        let arr = [[{ data: '' }, { data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }, { data: '' }]]


        var app = new Vue({

            el: "#app",
            data: {

                todo: arr,
                score: 0

            },

        })





        function Born(item) {


            let nullArr = Nullarr()

            let X = Random(nullArr.length)

            nullArr[X].data = t_Or_f()


            if (!item) {

                let Y = Random(nullArr.length)

                Y = Y == X ? X == 0 ? X + 1 : X - 1 : Y

                nullArr[Y].data = t_Or_f()

            }

            app.todo = arr

        }

        Born()

        let SS = 0

        let NewArr

        let oldArr

        let DD = 0

        document.addEventListener("keydown", function (e) {

            DD++

            if (DD == 1) {



                oldArr = Truearr(arr)

                SS = 0

                let type



                if (e.keyCode == 37) {

                    NewArr = arr

                    E()

                } else if (e.keyCode == 38) {

                    NewArr = Magic(arr, 1)

                    E(3)

                } else if (e.keyCode == 39) {

                    NewArr = Magic(arr, 2)

                    E(2)

                } else if (e.keyCode == 40) {

                    NewArr = Magic(arr, 3)

                    E(1)

                }else{

                    DD--

                }



            }

        })





        function merge(arr1) {



            arr1.forEach(item => {

                for (let i = 0; i < item.length - 1; i++) {


                    if (item[i].data == item[i + 1].data) {

                        item[i].data += item[i].data

                        item[i + 1].data = ""

                        app.score += (item[i].data * 1)

                    }


                }

            })



            return arr1

        }


        function E(frequency) {


            let frame = [[], [], [], []]

            setTimeout(() => {

                SS++

                for (let i = 0; i < 4; i++) {

                    let data = []


                    if ((NewArr[i][1].data != "" && (NewArr[i][0].data != "" || NewArr[i][2].data != "")) || (NewArr[i][1].data == "" && NewArr[i][0].data != "" && NewArr[i][2].data != "")) {

                        data = NewArr[i].filter(item => {

                            return item.data != ""

                        })

                        frame[i] = [...data]


                    } else {


                        data = [...NewArr[i]]

                        if (NewArr[i][0].data == "") {



                            data.splice(0, 1)


                        } else {

                            data.splice(1, 1)

                        }

                        frame[i] = [...data]

                    }





                }

                for (let j = 0; j < 4; j++) {

                    for (let i = 0; i < 4; i++) {

                        if (!frame[j][i]) {

                            frame[j].push({ data: '' })

                        }
                    }


                }






                if (frequency) {

                    frame = Magic(frame, frequency)

                }




                arr = frame

                app.todo = arr

                NewArr = arr



                if (frequency) {


                    NewArr = Magic(NewArr, 4 - frequency)

                }




                if (SS < 3) {



                    E(frequency)

                } else if (SS == 3) {


                    let frame2 = arr


                    arr = merge(NewArr)

                    E(frequency)



                } else {

                    if (Isborn(arr)) {

                        setTimeout(() => {

                            Born(1)


                            if (Isover(arr)) {

                                setTimeout(() => {



                                    alert("游戏结束")


                                    location.href = "./2048.html"
                                }, 800)

                            } else {

                                DD = 0

                            }



                        }, 25)


                    } else {

                        DD = 0

                    }






                }

            }, 25);





        }

        function Isover(arr1) {

            let arr2 = Magic(arr1, 1)

            if (Isfull(arr1) && Compare(arr2) && Compare(arr1)) {

                console.log("dd");

                return true

            }

        }


        function Isfull(arr1) {

            for (let i = 0; i < arr1.length; i++) {

                for (let j = 0; j < arr1[i].length; j++) {

                    if (arr1[i][j].data == "") {

                        return false
                    }


                }


            }

            return true
        }



        function Compare(arr1) {

            let isTrue = true

            arr1.forEach(item => {

                for (let i = 0; i < item.length - 1; i++) {

                    let item1 = item[i].data || NaN
                    let item2 = item[i + 1].data || NaN

                    if (item1 == item2) {

                        isTrue = false

                    }

                }

            })


            return isTrue

        }


        function Isborn(arr1) {

            let isTrue = 0


            for (let j = 0; j < oldArr[0].length; j++) {


                for (let i = 0; i < oldArr.length; i++) {

                    isTrue = oldArr[j][i].data == arr1[j][i].data ? ++isTrue : isTrue

                }

            }

            if (isTrue != 16) {

                return true

            }


        }


        function Truearr(arr1) {

            let arr2 = [[{ data: '' }, { data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }, { data: '' }]]


            for (let i = 0; i < arr1.length; i++) {

                arr2[i][0].data = arr1[i][0].data
                arr2[i][1].data = arr1[i][1].data
                arr2[i][2].data = arr1[i][2].data
                arr2[i][3].data = arr1[i][3].data

            }

            return arr2

        }


        function Magic(NewArr, frequency) {


            let Newarr

            for (let j = 0; j < frequency; j++) {

                Newarr = [[], [], [], []]

                for (let i = 0; i < arr.length; i++) {

                    Newarr[3].push(NewArr[i][0])
                    Newarr[2].push(NewArr[i][1])
                    Newarr[1].push(NewArr[i][2])
                    Newarr[0].push(NewArr[i][3])

                }

                NewArr = Newarr
            }

            return Newarr

        }

        function Nullarr() {

            let nullArr = []

            arr.forEach(item => {

                item.forEach(item2 => {

                    if (item2.data == "") {

                        nullArr.push(item2)

                    }


                })

            })

            return nullArr

        }



        function Random(len) {

            return parseInt(Math.random() * len)

        }

        function t_Or_f() {

            return parseInt(Math.random() * 10) <= 8 ? 2 : 4

        }

    </script>

</body>

</html>